@import "../commonFunc";

.select_component {
    @include displayFlex;
    height: px2rem(24);

    label {
        @include color(#AF8962);
        @include fontSize(px2rem(14));
    }

    .ant-select {
        width: px2rem(100);
        .ant-select-selector{
            @include bgColor(transparent);
        }

        .ant-select-selection-item {
            @include color(#947155);
            @include fontSize(px2rem(14));
        }
    }

    .export_picture {
        @include widthHeight(px2rem(24));
        @include displayFlex;
        @include fontSize(px2rem(20));
        @include color($defaultColor);
        margin-left: px2rem(10);
        cursor: pointer;

        &:hover {
            @include color($defaultActiveColor)
        }
    }
}

.statistics_charts {
    height: px2rem(240);
    @include position(relative);

    .echarts-for-react, .charts_container {
        height: 100% !important;
    }
}

.area_watch {
    @include displayFlex;
    @include position;
    @include trbl(0, '', '', 0);
    padding-top: px2rem(10);

    p {
        @include color(#87603F);
        @include position(relative);
        @include fontSize(px2rem(14));
        margin-right: px2rem(8);
        padding-left: px2rem(32);
        height: px2rem(20);
        cursor: pointer;

        &.active {
            @include color(#d8d8d8);

            &:hover {
                @include color(#d8d8d8)
            }

            &:before, &:after {
                @include bgColor(#d8d8d8 !important);
            }
        }

        &:hover {
            @include color($defaultActiveColor)
        }

        &:before {
            content: "";
            @include widthHeight(px2rem(12));
            @include position;
            @include trbl(px2rem(5), '', '', px2rem(12));
        }

        &:after {
            content: "";
            @include widthHeight(px2rem(12));
            @include position;
            @include trbl(px2rem(5), '', '', 0, 10);
            @include bgColor(rgba(181, 146, 110, .4))
        }

        &:first-of-type {
            &:before {
                @include bgColor(#BA3732);
            }
        }

        &:last-of-type {
            &:before {
                @include bgColor(#E8B156);
            }
        }
    }
}
